<template>
    <h3>Hook</h3>
    <p>实时鼠标位置: {{x}},{{y}}</p>
</template>

<script>
import useMousePosition from "../hooks/useMousePosition"

export default {
    name: 'Hook',
    setup(props, ctx) {
        console.log('Hook setup', props, ctx);

        /* 
        任何组件调用这个hook，即可实现： 
        1、定义响应式数据x,y
        2、组件加载完毕时建立mousemove事件监听器
        3、在mousemove的时候实时修改x,y的数据
        4、组件卸载时自动移除mousemove事件监听器以释放内存
        */
        const {x,y} = useMousePosition()

        return {
            x,y
        }
    }
}
</script>